<template>
  <a-card class="app-management-item" hoverable>
    <div class="app-management-item__title">
      <div class="app-management-item__left">
        <a-avatar :size="54" shape="square" :alt="name">T</a-avatar>
        <a-tooltip :content="name" position="bottom">
          <span class="app-management-item__name">{{ name }}</span>
        </a-tooltip>
      </div>
      <div class="app-management-item__right">
        <a-badge status="success" :offset="[-10, 0]" />
        <a-typography-text type="success">{{ status }}</a-typography-text>
      </div>
    </div>
    <div class="app-management-item__body">
      <a-space direction="vertical">
        <a-typography-text type="secondary">应用ID：{{ id }}</a-typography-text>
        <a-typography-text type="secondary">选用模型：{{ model }}</a-typography-text>
      </a-space>
      <a-space class="app-management-item__tags" direction="horizontal" size="small">
        <a-tag v-for="tag in tags" :key="tag.label" size="large" :color="tag.color">
          {{ tag.label }}
        </a-tag>
      </a-space>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import type { AppManagementRecord } from '@/api/app-center';
defineProps<AppManagementRecord>();
</script>

<style lang="less" scoped>
.app-management-item {
  background: #fff;
  border-radius: 7px;
  width: 460px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-right: 24px;
  margin-bottom: 23px;
  display: inline-block;

  &:hover {
    box-shadow: 3px 0 12px #e5ecf1;
  }

  &__title {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__left {
    display: flex;
    align-items: center;
  }

  &__right {
    display: table-cell;
    vertical-align: middle;
  }

  &__name {
    color: #495366;
    max-width: 160px;
    font-weight: 700;
    font-weight: 600;
    font-size: 18px;
    margin-left: 12px;
  }

  &__body {
    margin-top: 2rem;
  }

  &__tags {
    margin-top: 1rem;
  }
}
</style>
